<!-- 个人中心 -->
<template>
	<view class="page" v-if="chat_flag == 1">
		<u-navbar :is-back="true" back-icon-color="#fff" title-color="#fff" :border-bottom="false" title="我的二维码" :background="background"></u-navbar>
		<view class="qr-img-box">
			<image mode="widthFix" :src="canvasImg"></image>
		</view>
		<view class="btn-box" v-if="canvasImg">
			<view class="button" @click="onSaveImg">保存到手机</view>
			<view class="button" @click="onSaveQr">打印二维码</view>
		</view>
		<!-- 海报 -->
		<canvas class="f__canvas" style="width:600px;height:730px"  canvas-id="firstCanvas" id="firstCanvas"></canvas>
		<!-- 二维码 -->
		<canvas class="f__canvas" style="width:300px;height:300px;" canvas-id="qrcode" id="qrcode"></canvas>
		<user-auth></user-auth>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';// 加载万能绘制方法
	import { saveImg,qrcodeCanvas } from '@/uni_modules/fan-canvas/plugins/utils';// 需要保存图片和生成二维码可以引用此文件
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'unset',
				},
				user: {},
				goodsImg: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220924/42330c8f7e1c4fe6ba9cc79b23d94da0.jpg',
				content: '冰糖葫芦自助售卖。',
				qrcodeImg: '',
				canvasImg: '',    //生成的海报图片
			}
		},
		onLoad() {
			this.getShare();
		},
		computed: {
			...mapState(['vuex_user','chat_flag']),
		},
		methods: {
			getShare() {
				this.$u.get('/system/user/getShare').then(res => {
					this.user = res.user;
					this.content = this.user.signName;
					if(this.user.albums == '' || this.user.albums == null){
						this.goodsImg = this.user.avatar;
					}else{
						this.goodsImg = this.user.albums.split(',')[0];
					}
					this.createGoodsPoster();
				})
			},
			async createGoodsPoster() {
			    if(this.canvasImg){
			    	return
			    }
				var that = this;
				uni.showLoading({
					title: '生成中'
				});
				const cvsW = 600;
				const cvsH = 730;
			    const goodsH = 400;
				const logo_w = 100;
			    const margin = 30;
				let family = " 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei',sans-serif";
				let ctx = uni.createCanvasContext('firstCanvas');
			    // 绘制矩形
				_canvas.fillRoundRect(ctx,0,0,cvsW,cvsH,20,"#ffffff");
			    // 同步加载图片
				var logo = await _canvas.getImageInfo(this.goodsImg);
				var qrCode = await _canvas.getImageInfo(this.user.qrCode);
				var avatar = await _canvas.getImageInfo(this.user.avatar);
				if(logo.path){
			        // save+clip+restore:防止图片超出边框显示--相当于overflow: hidden;
			        ctx.save();
			        ctx.clip(); //剪切--不允许超出矩形框
			        // 绘制商品图片
			        _canvas.drawImgCover(ctx, logo, 0, 0, cvsW, goodsH);
			        ctx.restore();
			        
			        // 价格符号
			        ctx.setFillStyle('#ff0036')
			        ctx.font = "24px" + family
			        ctx.fillText('￥', margin-5, 450)
			        // 价格
			        ctx.font = "40px" + family
			        ctx.fillText('2元', 50, 450)
			        
			        // 绘制圆角按钮
			        // 参数：cxt、背景颜色、x坐标、y坐标、宽度、高度、圆角、文字、文字颜色、文字位置
			        ctx.font = '22px' + family
			        //_canvas.drawButton(ctx, '#ef566d', 165, 418, 170, 32, 16, '新人价￥99', '#ffffff', 'center')
			        // 简介-多行文字
					ctx.setFillStyle('#666666')
			        ctx.textAlign = 'left';
					var options = {
						font:"normal 26px"+family,     //设置字体
						ctx:ctx,
						word:that.content,      //文本
						maxWidth:540,           //最大宽度
						maxLine:2,              //最大行数--超出省略
						x:margin,               //x坐标
						y:450,                  //y坐标
						l_h:40                  //行高
					}
			        // 文本自定义换行
					_canvas.dealWords(options)
			        // 绘制圆形头像
			        _canvas.drawCircular(ctx, avatar.path, margin, goodsH+margin+160, logo_w, logo_w);
			        // 名称
			        ctx.setFillStyle('#000000')
			        ctx.font = "bold 26px" + family
			        ctx.fillText(that.user.nickName, logo_w+margin+10, goodsH+margin+195)
			        // 简介
			        ctx.setFillStyle('#999999')
			        ctx.font = "normal 22px" + family
			        ctx.fillText('同城脱单，来晚趣', logo_w+margin+10, goodsH+margin+235)
			        // 绘制二维码
			        ctx.drawImage(qrCode.path, cvsW-margin-150, goodsH+margin+80+50, 150, 150);
			        // 绘制图片
					ctx.draw(false, function() {
						uni.canvasToTempFilePath({
							width: cvsW,
							height: cvsH,
							canvasId: 'firstCanvas',
							success(res) {
								uni.hideLoading();
								that.canvasImg = res.tempFilePath
							}
						},that)
					}, 500)
				}else{
					uni.hideLoading();
					uni.showToast({
						title: '生成失败',
						icon: 'none'
					});
				}
			},
			// 保存图片
			async onSaveImg() {
				let imgUrl = "";
				if(this.canvasImg){
					imgUrl = await this.canvasImg;
			        this.saveImgToLocal(imgUrl)
				}
			},
			saveImgToLocal(path) {
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success: function() {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功'
						});
					},
					fail: function() {
						uni.hideLoading();
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				});
			},
			// 保存图片
			async onSaveQr() {
				let imgUrl = "";
				if(this.user.qrCode){
					imgUrl = await this.user.qrCode;
			        saveImg(imgUrl)
				}
			},
			// 创建二维码
			createQrcode(){
			    var that = this
			    qrcodeCanvas('qrcode', 'https://www.baidu.com', 600, 600);
			    const ctx = uni.createCanvasContext('qrcode');
			    ctx.draw(true, function() {
			        uni.canvasToTempFilePath({
			            width: 600,
			            height: 600,
			            canvasId: 'qrcode',
			            success(res) {
			                // 二维码本地图
			                that.qrcodeImg = res.tempFilePath
			                console.log(res,'createQrcode')
			            }
			        },that)
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #352b49;
		top: 0;
		left: 0;
		bottom: 0;
		position: absolute;
		right: 0;
	}
	.f__canvas {
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}
	.qr-img-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 30px;
	}
	.btn-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 10px;
	}
	.button {
		background-color: #4d9df4;
		padding: 20rpx 160rpx;
		border-radius: 20px;
		color: #fff;
		font-size: 34rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15px;
	}
</style>
